<template>
  <div>
    <n-modal v-model:show="showModalRefsss" :mask-closable="false" preset="dialog" title="确认" content="你确认"
      positive-text="确认" negative-text="算了" @positive-click="onPositiveClick" @negative-click="onNegativeClick">
      <div class="topTitle">
        <label>关键词：<input v-model="keyword"></label>
        <label>地区：<input v-model="location"></label>
        <div class="inputValue">
          <n-input v-model:value="inputValue" type="text" placeholder="基本的 Input" :disabled="true" size="small" />
        </div>
      </div>
      <div class="modalDiv" ref="baiduRef">
        <baidu-map class="modalDiv2" :center="{ lng: 116.404, lat: 39.915 }" :zoom="15" :scroll-wheel-zoom="true"
          @click="clickHandler">
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
        </baidu-map>

      </div>

    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { useMessage } from 'naive-ui'
import { ref, watch, onMounted } from "vue"
const message = useMessage()
// const modalDiv = ref()
const baiduRef = ref()
const map = ref()
const point = ref()
let inputValue = ref(`120.153576,30.287459`)
const props = defineProps({
  showModalRef: {
    type: Boolean
  }
})
const location = ref('西湖');
const keyword = ref('西湖');
var BMap = (window as any).BMap

const emit = defineEmits(['closeModalRed'])
// const showModalRef = ref(false)
let showModalRefsss = ref(false)

// showModal: showModalRef,

const init = () => {
  var map = new BMap.Map(baiduRef.value);
  var point = new BMap.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);
}

function onNegativeClick() {
  message.success('Cancel')
  emit('closeModalRed',inputValue.value)
  // showModalRef.value = false
  showModalRefsss.value = false
}

function onPositiveClick() {
  message.success('Submit')
  // showModalRef.value = false
  emit('closeModalRed',inputValue.value)
  showModalRefsss.value = false
}

const clickHandler = (e) => {
  // alert(`单击点的坐标为：${e.point.lng}，${e.point.lat}`);
  inputValue.value = `${e.point.lng}，${e.point.lat}`
}

watch(() => props.showModalRef, (newValue) => {
  showModalRefsss.value = newValue
})

onMounted(() => {
  // init()
})
</script>

<style lang="scss" scoped>
.topTitle {
  // border: 1px solid red;
  // width: 500px;
  display: flex;
  flex-wrap: wrap;

  .inputValue {
    margin: 5px 0px 5px 0px;
    width: 400px;
    margin-left: 5px;
  }
}

.modalDiv {
  width: 600px;
  height: 400px;
  // border: 1px solid red;
  overflow: hidden;
  // overflow:scroll
  overflow-y: auto;
}

.modalDiv2 {
  width: 600px;
  height: 300px;
}

// :deep(.n-dialog.n-modal){
//   width: 700px !important;
// }
// ::v-deep(.n-dialog.n-modal){
//   width: 700px !important;
// }
</style>
<style>
.n-dialog.n-modal {
  width: 700px;
}
</style>